/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
// 获取频道列表
async function setChannelList() {
    const result = await axios({url: '/v1_0/channels'})
    document.querySelector('.form-select').innerHTML = '<option value="" selected="">请选择文章频道</option>' + result.data.channels.map(item => {
        return `
            <option value="${item.id}">${item.name}</option>
        `
    })
}

setChannelList()
/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
document.querySelector('.img-file').addEventListener('change', async e => {
    const formData = new FormData()
    formData.append('image', e.target.files[0])
    const result = await axios({url: '/v1_0/upload', method: 'POST', data: formData})
    // 回显图片
    document.querySelector('.rounded').src = result.data.url
    document.querySelector('.rounded').classList.add('show')
    document.querySelector('.place').classList.add('hide')
})

// 图片选择完成后，如果用户再次点击需触发重新选择
document.querySelector('.rounded').addEventListener('click', e => {
    document.querySelector('.img-file').click()
})
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
// 收集表单数据
document.querySelector('.send').addEventListener('click', async (e) => {
    if (e.target.innerHTML !== '发布') return
    const form = document.querySelector('.art-form')
    const data = serialize(form, {hash: true, empty: true})
    // 删除id属性
    delete data.id
    data.cover = {
        type: 1,
        images: [document.querySelector('.rounded').src]
    }
    console.log(data)
    // 提交数据
    try {
        const result = await axios({url: '/v1_0/mp/articles', method: 'POST', data})
        myAlert(true, '发布成功')
        // 重置表单
        form.reset()
        // 重置封面
        document.querySelector('.rounded').src = ''
        document.querySelector('.rounded').classList.remove('show')
        document.querySelector('.place').classList.remove('hide')
        // 重置富文本编辑器
        editor.setHtml('')
        setTimeout(() => {
            location.href = '../content/index.html'
        }, 1500)
    } catch (e) {
        console.log(e)
        myAlert(false, e.response.data.message)
    }
})


/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
;(function () {
    const searchParams = location.search
    const params = new URLSearchParams(searchParams)
    params.forEach(async (value, key) => {
        // 当有要编辑的文章 id 被传入
        if (key === 'id') {
            document.querySelector('.title span').innerText = '编辑文章'
            document.querySelector('.send').innerText = '修改'
            // 获取文章详情并回显表单
            const result = await axios({url: `/v1_0/mp/articles/${value}`})
            // 回显数据对象
            const dataObject = {
                channel_id: result.data.channel_id,
                title: result.data.title,
                rounded: result.data.cover.images[0],
                content: result.data.content,
                id: result.data.id
            }
            // 遍历数据对象的属性，映射到页面元素
            Object.keys(dataObject).forEach(key => {
                if (key === 'rounded') {
                    // 封面设置
                    if (dataObject[key]) {
                        // 有封面
                        document.querySelector('.rounded').src = dataObject[key]
                        document.querySelector('.rounded').classList.add('show')
                        document.querySelector('.place').classList.add('hide')
                    }
                } else if (key === 'content') {
                    // 富文本内容
                    editor.setHtml(dataObject[key])
                } else {
                    document.querySelector(`[name=${key}]`).value = dataObject[key]
                }
            })
        }
    })
})();
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async e => {
    if (e.target.innerHTML !== '修改') return
    try {
        const form = document.querySelector('.art-form')
        const data = serialize(form, {hash: true, empty: true})
        const result = await axios({
            url: `/v1_0/mp/articles/${data.id}`,
            method: 'PUT',
            data: {
                ...data,
                cover: {
                    type: document.querySelector('.rounded').src ? 1 : 0,
                    images: [document.querySelector('.rounded').src]
                }
            }
        })
        myAlert(true, '文章编辑成功')
        setTimeout(()=>{
            location.href = '../content/index.html'
        },1500)
    } catch (e) {
        myAlert(false, e.response.data.message)
    }
})